<template>
	<div class="main-div Menus">
		<div class="menus-list fl">
			<router-link to='/index'>
				<img class="menus-list-logo" src="../../../static/images/Personal/logo.png" />
			</router-link>
			<div>
				<ul class="example">
					<li :class="[{active:faindex==item.id}]" v-for="item  in items" :key="item.id" @click="showToggle(item)">
						<p><img class="example-img" :src="item.src" />{{item.name}}</p>
						<ul class="subItems-list">
							<!--阻止冒泡@click.stop-->
							<li v-for="subItem in item.subItems" @click.stop="clickChild(subItem)" :class="[{activeA:changindex==subItem.id}]">
								{{subItem.name}}
								<ul class="subItems-lists">
									<!--阻止冒泡@click.stop-->
									<li v-for="subItems in subItem.subItems" @click.stop="clickChildS(subItems)" :class="[{activeB:changindexS==subItems.id}]">
										{{subItems.name}}
									</li>
								</ul>
							</li>
						</ul>

					</li>
				</ul>
			</div>
		</div>
		<div class="nav-box fr">
			<header class="header-mormal ">
				<p class="system-management-title fl">西南大学新农村发展研究院-专家管理</p>
				<div class="mormal-right fr">
					<div class="user-box">
						<img class="The-message" src="../../../static/images/Personal/xiaoxi.png" />
						<span class="message-number">23</span>
						<img class="user-img fl" src="../../../static/images/Personal/user.png" />
						<span class="user-name fr">张三</span>
					</div>
				</div>
			</header>
			<!--子页面-->
			<div class="content">
				<router-view/>
			</div>
		</div>

	</div>

</template>
<script src="./Menus.js">
</script>
<style scoped>
	@import "Menus.css"
</style>